<template>
  <p class="font-bold mb-1 text-neutral-600" v-if="!showOnly">创意升级，效果加倍</p>
  <p class="mb-2" v-if="!showOnly">
    <span class="text-neutral-400">请选择需要升级的创意形式</span>
  </p>
  <a-card class="card select-none" :class="{ 'not-effect': disabled, 'card-select': select }" @click="emit('on-click')">
    <corner-mark v-show="select">已选择</corner-mark>
    <div class="flex justify-between items-center">
      <p class="title main-title mb-0">创意升级，效果加倍</p>
      <bw-creative-intro>
        <question-circle-outlined class="red cursor-pointer" />
      </bw-creative-intro>
    </div>
    <h3 class="big-1 mb-0">创意加配图</h3>
    <div class="flex flex-wrap">
      <div class="w-full mb-2">
        <p class="title mb-0">原价：{{ zeroFormat(priceUtils.creativeOriginPrice.value) }}元</p>
        <h3 class="big-2 mb-0 red">抢鲜价：{{ zeroFormat(priceUtils.creativePrice.value) }}元</h3>
      </div>
      <div class="w-full">
        <p class="title mb-0">投放时长</p>
        <h3 class="big-2 mb-0 black">{{ priceUtils.currentBaiduPriceData.value.timer || '--' }}</h3>
      </div>
    </div>
    <template #actions v-if="!showOnly">
      <div class="red font-bold select-none hover-red">
        <span v-if="select">已选择</span>
        <span v-else>点击选择</span>
      </div>
    </template>
  </a-card>
</template>

<script lang="ts" setup>
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import BwCreativeIntro from './BwCreativeIntro.vue'
import CornerMark from '@/components/corner-mark/index.vue'
import { usePriceTable } from '@/views/price-sheet/hooks/usePriceTable'

interface Props {
  disabled?: boolean
  showOnly?: boolean
  select: boolean
  priceUtils: ReturnType<typeof usePriceTable>
}

interface Emits {
  (e: 'on-click'): void
}

withDefaults(defineProps<Props>(), {
  disabled: true,
  showOnly: false,
  data: () => ({}),
  select: false
})

const emit = defineEmits<Emits>()

function zeroFormat(num: string) {
  return Number(num) === 0 ? '--' : num
}
</script>

<script lang="ts">
export default {
  name: 'BwCreativeCard'
}
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  width: 275px;
  border: 1.5px solid #ffd0d0;
  transition: all 0.2s ease;

  ::v-deep(.ant-card-body) {
    padding: 15px;
  }

  ::v-deep(.ant-card-actions) {
    transition: all 0.2s ease;
    border-top: 1.5px solid #ffd0d0;
  }

  ::v-deep(.ant-card-actions > li:not(:last-child)) {
    border-right: 1.5px solid #ffd0d0;
  }

  .title {
    font-weight: bold;
    font-size: 12px;
    color: rgb(165 165 165);
  }

  .main-title {
    color: rgb(183 87 87);
    font-size: 13px;
  }

  .big-1 {
    font-size: 30px;
    font-weight: bold;
    color: #ff6350;
  }

  .big-2 {
    font-size: 15px;
    font-weight: bold;
  }

  .red {
    color: #ff6350;
  }

  .black {
    color: #666;
  }
}

.card-select {
  background: #ff4d4f;

  .title {
    color: #fff;
  }

  .main-title {
    color: #fff;
  }

  .big-1 {
    color: #fff;
  }

  .red {
    color: #fff;
  }

  .black {
    color: #fff;
  }

  .hover-red {
    &:hover {
      color: #fff;
    }
  }

  ::v-deep(.ant-card-actions) {
    background: #ff4d4f;
  }
}

.not-effect {
  filter: grayscale(100%);
}

.hover-red {
  &:hover {
    color: red;
  }
}
</style>
